<template>
  <div class="app-container calendar-list-container">
  <span style="font-family:Georgia">{{compoenShopName}}店铺首页管理</span>
  <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="banner管理" name="first" :key="'first'">
                <child1 v-if="isChildUpdate1" ></child1>
            </el-tab-pane>
    
            <el-tab-pane label="推荐分组" name="second" :key="'second'">
                <child2 v-if="isChildUpdate2"></child2>    
            </el-tab-pane>

             <el-tab-pane label="推荐位模板" name="third" :key="'third'">
                <child3 v-if="isChildUpdate3"></child3>    
            </el-tab-pane>
        </el-tabs>
  </div>
 
</template>

<script>
import bannerAdManage from './shopsManage/bannerAdManage'
import groupAdManage from './shopsManage/groupAdManage'
import componenAdManage from './shopsManage/componenAdManage'
import { mapGetters } from "vuex";
import { getToken } from "utils/auth";
import globalVariable from '@/utils/global'
export default {
  name: "managementShops",
  components:{
      child1:bannerAdManage,
      child2:groupAdManage,
      child3:componenAdManage
  },
  data() {
    return {
        activeName: "first",
        isChildUpdate1:true,
        isChildUpdate2:false,
        isChildUpdate3:false,
        compoenShopName:undefined,
        shopId:undefined,
    };
  },
  created() {
      this.getBannerInfo();
      globalVariable.setShopId(this.shopId);
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
      getBannerInfo(){
          this.compoenShopName=this.$route.query.name
          this.shopId = this.$route.query.id;
      }
      ,
        handleClick(tab) {
            if(tab.name == "first") {
                this.isChildUpdate1 = true;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
            } else if(tab.name == "second") {
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = true;
                this.isChildUpdate3 = false;
            }else if(tab.name=="third"){
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = true;
            }
        }
    
  }
};
</script>
<style>

</style>
